<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        body{
            padding-bottom: 800px;
        }
        .rate-box{
            font-size: 12px;
            display: inline-block;
        }
        .rate-box .iconfont{
            font-size: 1em;
            cursor: pointer;
            padding: 0em 0.2em;
            cursor: pointer;
            color: #ccc;
            vertical-align: middle;

        }
        .rate-box .iconfont.active{
            color: goldenrod;
        }
        .rate-box .source{
            font-size: 1.2em;
            padding-left: 0.5em;
            vertical-align: middle;
        }
        .my-rate{
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <rate-comp></rate-comp>
        <rate-comp class="my-rate" :size="20" :max="10"></rate-comp>
        <hr>
        <rate-comp-two class="my-rate" :size="20" :max="10"></rate-comp-two>
        <hr>
        <div>
            <ul>
                <li>
                    <span>物流评分({{ source1.rate1 }}):</span>
                    <rate-comp v-model="source1.rate1" :size="20"></rate-comp>
                </li>
                <li>
                    <span>商品评分({{ source1.rate2 }}):</span>
                    <rate-comp v-model="source1.rate2" :size="20"></rate-comp>
                </li>
                <li>
                    <span>客服评分({{ source1.rate3 }}):</span>
                    <rate-comp v-model="source1.rate3" :size="20"></rate-comp>
                </li>
                <li>
                    <span>综合评分[只读]({{ source1.rate3 }}):</span>
                    <rate-comp v-model="avgSource" :size="20" disabled></rate-comp>
                </li>
            </ul>
            <input type="button" value="提交评分" @click="printSource()">
        </div>
    </div>

    <script type="text/x-template" id="rateComp">
        <!-- 组件定义两个相同的功能结构，但一个有事件一个没有事件，通过v-if + 只读属性的方式进行选择 -->
        <!-- 通过只读属性构建动态 事件绑定规则 -->
        <div class="rate-box" :style=" {fontSize:size+'px'} ">
            <span class="iconfont icon-collection-b"
                v-for=" c in 5 "
                :class=" { active:modelValue>=(max/5)*c } "
                @[sourceEvent]=" $emit('update:modelValue',(max/5)*c )"
            ></span>
            <span class="source">{{ modelValue.toFixed(1) }}</span>
        </div>
    </script>
    <script type="text/x-template" id="rateCompTwo">
        <div class="rate-box" :style=" {fontSize:size+'px'} ">
            <span class="iconfont icon-collection-b"
                v-for=" c in max "
                :class=" { active:source>=c } "
                @click=" source = c"
            ></span>
            <span class="source">{{ source.toFixed(1) }}</span>
        </div>
    </script>

    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                    source1:{
                        rate1:3,
                        rate2:4,
                        rate3:5
                    }
                }
            },
            computed: {
                avgSource() {
                    return (this.source1.rate1+this.source1.rate2+this.source1.rate3) / 3
                }
            },
            methods: {
                printSource() {
                    
                }
            },
        });
        
        app.component("RateComp",{
            template:"#rateComp",
            emits:["update:modelValue"],
            props:{
                size:{
                    type:Number,
                    default:12
                },
                max:{
                    type:Number,
                    default:5,
                    // validator(v){}
                },
                modelValue:{
                    type:Number,
                    default:0
                },
                disabled:{
                    type:Boolean,
                    default:false
                }
            },
            computed: {
                sourceEvent() {
                    return this.disabled?"":"click";
                }
            },
        })
        app.component("RateCompTwo",{
            template:"#rateCompTwo",
            props:{
                size:{
                    type:Number,
                    default:12
                },
                max:{
                    type:Number,
                    default:5,
                    // validator(v){}
                }
            },
            data() {
                return {
                    source: 0
                }
            }
        })

        app.mount("#app")
    </script>
</body>
</html>